<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode" field="content">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<image :src="item.url" mode="aspectFill" class="image"></image>
					<view class="swiper-item" :class="'swiper-item' + index" />

				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="detail">
			<view class="storeDetail">
				<text class="storeName">伟业汽车保养厂(人民路店）</text>
				<view class="starPort">
					<uni-rate v-model="rateValue" @change="onChange" touchable="true" color="#c7c7c7" />
					<text class="content_a">{{rateValue}}分</text>
					<text class="content_b">销量：322</text>
				</view>
			</view>
			<view class="timeDesign">
				<text>营业时间：周一至周五 09:00-22:00</text>
			</view>
			<view class="location">
				<text>山阳区人民中路32号</text>
				<image src="/static/plane.png" @click="clickLocation" />
			</view>
		</view>
		<view class="service">
			<text>服务</text>
			<uni-data-checkbox multiple v-model="checkbox1" :localdata="services" mode="list" class="selected-area" />
			<view class="innerC">
				<text class="innerC_a">￥ {{nowPrice}}</text>
				<text class="innerC_b">￥ {{beforePrice}}</text>
			</view>
		</view>
		<view class="intro">
			<view class="intro_a">{{text}}</view>
		</view>
		<view class="evaluation">
			<view class="evaluation_a">服务评价</view>
			<view class="evaluationDetail">
				<view class="avater">
					<view class="desin">
						<image src="/static/6.png" mode="aspectFill" />
					</view>
					<view class="username">
						<text>晚照</text>
						<uni-rate v-model="rateValue_D" @change="onChange" touchable="true" color="#c7c7c7" />
					</view>
					<view class="level">
						<text>{{timeNow}}</text>
					</view>
				</view>
				<view class="evaluationDetail_a">
					<view class="userComments">
						<view>{{textE}}</view>
					</view>
					<view class="image_item">
						<view class="imageD" v-for="(item, index) in imageList" :key="index">
							<image :src="item" mode="aspectFill" class="imageD_a" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottomStyle">
			<button class="button-group--left" @click="open">购物车</button>
			<navigator url="/pages/carMaintenance/confirmOrder/confirmOrder">
				<button class="button-group--right">确认已选服务</button>
			</navigator>
		</view>

		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="popup-inner">
				<view class="innerP_a">
					<text>服务订单</text>
					<view @click="close">×</view>
				</view>
				<view class="innerP_b">
					<uni-data-checkbox v-model="baseFormData.service" selected-color="#07C160" mode="list" multiple
						:localdata="service" />
				</view>
				<view class="button-popup">
					<button class="button-popup--left" @click="open">合计：</button>
					<navigator url="/pages/carMaintenance/confirmOrder/confirmOrder">
						<button class="button-popup--right">确认已选服务</button>
					</navigator>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script>
	export default {
		components: {},
		data() {
			return {
				baseFormData: {
					service: [3],
				},
				imageList: [
					'/static/18.png',
					'/static/19.png',
					'/static/21.png',
					'/static/22.png',
				],
				info: [{
						url: '/static/1.png',
						content: ''
					},
					{
						url: '/static/6.png',
						content: ''
					},
					{
						url: '/static/14.png',
						content: ''
					},
					{
						url: '/static/15.png',
						content: ''
					},
					{
						url: '/static/16.png',
						content: ''
					},
					{
						url: '/static/17.png',
						content: ''
					},
				],
				service: [{
					text: '日式水晶打蜡',
					value: 0,
					price: 199,
				}, {
					text: '车身去氧化',
					value: 1,
					price: 299,
				}, {
					text: '轮胎补气',
					value: 2,
					price: 399,
				}],
				current: 0,
				rateValue: 3,
				rateValue_D: 4,
				mode: 'nav',
				timeNow: '2022-10-5',
				checkbox1: [],
				nowPrice: '199',
				beforePrice: '299',
				text: '一级缓存是SqlSession级别的缓存，在操作数据库时需要构造SqlSession对象，在对象中有一个HashMap数据结构用于存储缓存数据。不同的SqlSession之间的缓存数据区域是互相不影响的。默认情况下，一级缓存是开启的。',
				textE: '八百年前，明帝之子张若尘，被他的未婚妻池瑶公主杀死，一代天骄，就此陨落。八百年后，张若尘重新活了过来，却发现曾经杀死他的未婚妻，已经统一昆仑界， 开辟出第一中央帝国， 号称“ 池瑶女皇”。 池瑶女皇—— 统御天下， 威临八方； 青春永驻， 不死不灭。 ',
				services: [{
					text: '小保养套餐1（合成机油+机滤）',
					value: 0
				},{
					text: '小保养套餐1（合成机油+机滤）',
					value: 1
				},{
					text: '小保养套餐1（合成机油+机滤）',
					value: 2
				}],

			}
		},
		onLoad() {
			uni.loadFontFace({

			})

		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onChange(e) {
				//console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			clickLocation(e) {
				console.log("点击图片事件发生");
			},
			changeD(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			open() {

				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>


<style lang="scss">
	.swiper-box {
		left: 3px;
		top: 0px;
		width: 376px;
		height: 225px;
		background-color: rgba(229, 229, 229, 1);
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}


	.image {
		width: 100%;
	}


	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}


	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.detail {
		margin: 0px 16px;
		margin-top: 17px;
		padding-bottom: 8px;
		border-bottom: 2px solid rgba(234, 234, 234, 1);
	}

	.storeName {
		left: 16px;
		top: 242px;
		width: 228px;
		height: 23px;
		line-height: 23px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		font-family: PingFangSC-medium;
	}

	.starPort {
		margin-top: 6px;
		display: flex;
	}

	.content_a {
		padding-left: 8px;
		font-size: 16px;
	}

	.content_b {
		padding-left: 30px;
		font-weight: 550;
		font-size: 16px;
		font-family: PingFangSC-regular;
	}

	.timeDesign {
		margin-top: 6px;
		font-size: 16px;
	}

	.timeDesign>text {
		family: PingFangSC-regular;
	}

	.location {
		margin-top: 6px;
		display: flex;
	}

	.location>text {

		font-size: 16px;
	}

	.location>image {
		width: 20px;
		height: 20px;
		margin-left: 8px;
	}

	.service {
		margin: 24px 31px 0px 31px;
	}

	.service>text {
		font-size: 16px;
		font-weight: bold;
	}

	.innerC {
		margin-top: 6px;
	}

	.innerC_a {
		font-size: 14px;
		font-weight: bold;
	}

	.innerC_b {
		padding-left: 15px;
		font-size: 10px;
		color: rgba(234, 23, 3, 1);
		text-decoration-line: line-through;
	}

	.intro {
		margin: 0px 16px;
		padding-bottom: 8px;
		border-top: 2px solid rgba(234, 234, 234, 1);
	}

	.intro_a {
		padding: 5px 12px;
	}

	.evaluation {
		margin: 14px 22px 14px 36px;
	}

	.evaluation_a {
		font-size: 16px;
		font-weight: bold;
	}

	.evaluationDetail {
		margin-top: 18px;
	}

	.avater {
		margin-bottom: 2px;
		display: flex;
	}

	.desin>image {
		width: 45px;
		height: 45px;
		border-radius: 100px;
	}

	.username {
		margin-left: 10px;
		font-weight: bold;
	}

	.level {
		margin-left: 64px;
		font-weight: 600;
	}



	.evaluationDetail_a {
		margin-left: 56px;
	}

	.userComments {
		font-size: 12px;
		line-height: 16px;
	}

	.image_item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-right: 6px;
		margin-top: 5px;
	}


	.imageD .imageD_a {
		width: 124px;
		height: 80px;
	}

	.bottomStyle {
		display: flex;
	}


	.button-group--left {
		width: 160px;
		height: 40px;
		line-height: 34px;
		border-radius: 100px;
		background-color: rgba(246, 57, 13, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(246, 57, 13, 1);
		position: fixed;
		bottom: 5px;
		left: 17px;
	}

	.button-group--right {
		width: 160px;
		height: 40px;
		line-height: 34px;
		border-radius: 100px;
		background-color: rgba(251, 171, 7, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(251, 171, 7, 1);
		position: fixed;
		bottom: 5px;
		right: 17px;
	}

	.popup-inner {
		left: 1px;
		top: 546px;

		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(187, 187, 187, 1);
	}

	.innerP_a {
		left: 1px;
		top: 547px;
		width: 374px;
		height: 53px;
		line-height: 20px;
		background-color: rgba(239, 239, 239, 1);
		color: rgba(16, 16, 16, 1);
		text-align: left;
		font-family: Roboto;
		border: 1px solid rgba(187, 187, 187, 1);
		display: flex;
	}

	.innerP_a>text {
		line-height: 53px;
		padding-left: 14px;
		font-size: 16px;
	}

	.innerP_a>view {
		font-size: 28px;
		line-height: 50px;
		margin-left: 250px;
	}

	.innerP_b {
		margin-left: 10px;
		display: flex;
		position: relative;
	}

	.moenyDesign {
		position: absolute;
		margin-top: 8px;
		right: 30px;
	}

	.innerP_b>uni-data-checkbox {
		padding: 20px 0;
	}

	.button-popup {
		display: flex;
	}

	.button-popup--left {
		width: 160px;
		height: 40px;
		line-height: 34px;
		border-radius: 100px;
		background-color: rgba(246, 57, 13, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(246, 57, 13, 1);
		bottom: 5px;
	}

	.button-popup--right {
		width: 160px;
		height: 40px;
		line-height: 34px;
		border-radius: 100px;
		background-color: rgba(251, 171, 7, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(251, 171, 7, 1);
		bottom: 5px;
	}
</style>

<style scoped>
	/deep/ .uni-swiper__dots-nav[data-v-77b53eff] {
		left: 333px;
		top: 197px;
		width: 40px;
		height: 6px;
		line-height: 20px;
		border-radius: 15px;
		background-color: rgba(51, 51, 51, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(187, 187, 187, 1);
		padding: 10px -4px 10px -4px;
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text[data-v-84d5d996] {
		font-size: 14px;
		color: #000;
		margin-left: 5px;
		line-height: 14px;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--list[data-v-84d5d996] {
		display: flex;
		padding: 10px 15px;
		padding-left: 0;
		margin: 0;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner[data-v-84d5d996] {
		flex-shrink: 0;
		box-sizing: border-box;
		position: relative;
		width: 16px;
		height: 16px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		background-color: #fff;
		z-index: 1;
		margin-left: 400rpx;
	}

	/deep/ [data-v-4e4f29d8] .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text[data-v-84d5d996] {
		font-size: 14px;
		color: #000;
		margin-left: 5px;
		line-height: 14px;
		position: relative;
		margin-left: -110rpx;
	}
</style>